<template>
  <el-main>
    <el-card shadow="never" header="分步表单">
      <el-steps :active="active" align-center style="margin-bottom: 20px">
        <el-step title="填写转账信息"></el-step>
        <el-step title="确认转账信息"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-row>
        <el-col :lg="{ span: 8, offset: 8 }">
          <el-form
            v-if="active == 0"
            ref="stepForm_0"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-form-item label="付款账户" prop="paymentAccount">
              <el-select v-model="form.paymentAccount" clearable>
                <el-option
                  label="sakuya@scui.com"
                  value="sakuya@scui.com"
                ></el-option>
                <el-option
                  label="lolicode@scui.com"
                  value="lolicode@scui.com"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="收款账户" prop="collectionAccount">
              <el-input v-model="form.collectionAccount" clearable></el-input>
            </el-form-item>
            <el-form-item label="收款人姓名" prop="collectionName">
              <el-input v-model="form.collectionName" clearable></el-input>
            </el-form-item>
            <el-form-item label="转账金额" prop="amount">
              <el-input v-model="form.amount"></el-input>
            </el-form-item>
          </el-form>
          <el-form
            v-if="active == 1"
            ref="stepForm_1"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-alert
              title="确认转账后，资金将直接打入对方账户，无法退回。"
              type="warning"
              show-icon
              style="margin-bottom: 15px"
            />
            <el-descriptions :column="1" border>
              <el-descriptions-item label="付款账户">{{
                form.paymentAccount
              }}</el-descriptions-item>
              <el-descriptions-item label="收款账户">{{
                form.collectionAccount
              }}</el-descriptions-item>
              <el-descriptions-item label="收款人姓名">{{
                form.collectionName
              }}</el-descriptions-item>
              <el-descriptions-item label="转账金额"
                >{{ form.amount }} 元</el-descriptions-item
              >
            </el-descriptions>
            <el-divider></el-divider>
            <el-form-item label="支付密码" prop="payPassword">
              <el-input
                v-model="form.payPassword"
                show-password
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-form>
          <div v-if="active == 2">
            <el-result
              icon="success"
              title="操作成功"
              sub-title="预计两小时内到账"
            >
              <template #extra>
                <el-button type="primary" @click="again">再转一笔</el-button>
                <el-button>查看账单</el-button>
              </template>
            </el-result>
          </div>
          <el-button
            v-if="active > 0 && active < 2"
            @click="pre"
            :disabled="submitLoading"
            >上一步</el-button
          >
          <el-button v-if="active < 1" type="primary" @click="next"
            >下一步</el-button
          >
          <el-button
            v-if="active == 1"
            type="primary"
            @click="submit"
            :loading="submitLoading"
            >提交</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </el-main>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
const active = ref(0);
const submitLoading = ref(false);
const stepForm_0 = ref(null);
const stepForm_1 = ref(null);
const form = reactive({
  paymentAccount: "lolicode@scui.com",
  collectionAccount: "test@example.com",
  collectionName: "Lolowan",
  amount: "100",
  payPassword: "",
});
const rules = reactive({
  paymentAccount: [
    {
      required: true,
      message: "请选择付款账户",
    },
  ],
  collectionAccount: [
    {
      required: true,
      message: "请输入收款账户",
    },
  ],
  collectionName: [
    {
      required: true,
      message: "请输入收款人姓名",
    },
  ],
  amount: [
    {
      required: true,
      message: "请输入转账金额",
    },
  ],
  payPassword: [
    {
      required: true,
      message: "需要支付密码才能进行支付",
    },
  ],
});

const formRef = computed(() => {
  const map = {
    0: stepForm_0.value,
    1: stepForm_1.value,
  };
  return map[active.value];
});

//下一步
const next = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      active.value += 1;
    } else {
      return false;
    }
  });
};

const pre = () => {
  active.value -= 1;
};

//提交
const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      submitLoading.value = true;
      setTimeout(() => {
        submitLoading.value = false;
        active.value += 1;
      }, 1000);
    } else {
      return false;
    }
  });
};

//再来一次
const again = () => {
  active.value = 0;
};
</script>


<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
  background: var(--el-color-primary);
}
</style>
